<template>
  <div>
    <el-form ref="editPram" :model="editPram" label-width="130px">
      <el-form-item
        label="分类名称"
        prop="name"
        :rules="[
          {
            required: true,
            message: '请输入分类名称',
            trigger: ['blur', 'change']
          }
        ]"
      >
        <el-input
          v-model="editPram.name"
          :maxlength="biztype.value === 1 ? 8 : 20"
          placeholder="分类名称"
        />
      </el-form-item>
      <el-form-item
        label="URL"
        v-if="biztype.value !== 1 && biztype.value !== 3"
      >
        <el-input v-model="editPram.url" placeholder="URL" />
      </el-form-item>
      
      <el-form-item label="父级" v-if="biztype.value !== 3">
        <el-cascader
          v-model="editPram.pid"
          :disabled="isCreate === 1 && editPram.pid === 0"
          :options="biztype.value === 5 ? allTreeList : parentOptions"
          :props="categoryProps"
          style="width:100%"
        />
      </el-form-item>
      <el-form-item label="关联小程序" v-if="editPram.pid === 0">
        <el-select clearable v-model="editPram.subAppId" placeholder="可多选" multiple style="width:100%">
					<el-option v-for="item in constants.wxList" :key="item.index" :value="item.index" :label="item.name">{{item.name}}</el-option>
				</el-select>
      </el-form-item>
      <el-form-item
        label="备注"
      >
        <el-input v-model="editPram.extra" placeholder="extra" />
      </el-form-item>
      <el-form-item label="菜单图标" v-if="biztype.value === 5">
        <el-input placeholder="请选择菜单图标" v-model="editPram.extra">
          <el-button
            slot="append"
            icon="el-icon-circle-plus-outline"
            @click="addIcon"
          ></el-button>
        </el-input>
      </el-form-item>
      <el-form-item
        label="分类图标(180*180)"
        v-if="biztype.value === 1 || biztype.value === 3"
      >
        <div class="upLoadPicBox" @click="modalPicTap('1')">
          <div v-if="editPram.extra" class="pictrue">
            <img :src="editPram.extra" />
          </div>
          <div v-else class="upLoad">
            <i class="el-icon-camera cameraIconfont" />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="editPram.sort" :min="0" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch
          v-model="editPram.status"
          active-text="显示"
          inactive-text="隐藏"
          :active-value="true"
          :inactive-value="false"
        />
      </el-form-item>
      <el-form-item
        label="扩展字段"
        v-if="biztype.value !== 1 && biztype.value !== 3 && biztype.value !== 5"
      >
        <el-input
          v-model="editPram.extra"
          type="textarea"
          placeholder="扩展字段"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :loading="loadingBtn"
          @click="handlerSubmit('editPram')"
          v-hasPermi="['admin:category:update']"
          >确定</el-button
        >
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<!--创建和编辑公用一个组件-->
<script>
import * as categoryApi from "@/api/categoryApi.js";
import * as selfUtil from "@/utils/ZBKJIutil.js";
export default {
  // name: "edit"
  props: {
    prent: {
      type: Object,
      required: true
    },
    isCreate: {
      type: Number,
      default: 0
    },
    editData: {
      type: Object
    },
    biztype: {
      type: Object,
      required: true
    },
    allTreeList: {
      type: Array
    }
  },
  data() {
    return {
      loadingBtn: false,
      constants: this.$constants,
      editPram: {
        extra: null,
        name: null,
        pid: null,
        sort: 0,
        status: true,
        type: this.biztype.value,
        url: null,
        id: 0,
        subAppId: ''
      },
      categoryProps: {
        value: "id",
        label: "name",
        children: "child",
        expandTrigger: "hover",
        checkStrictly: true,
        emitPath: false
      },
      parentOptions: []
    };
  },
  mounted() {
    this.initEditData();
  },
  methods: {
    // 点击图标
    addIcon() {
      const _this = this;
      _this.$modalIcon(function(icon) {
        _this.editPram.extra = icon;
      });
    },
    // 点击商品图
    modalPicTap(tit, num, i) {
      const _this = this;
      const attr = [];
      this.$modalUpload(
        function(img) {
          if (tit === "1" && !num) {
            _this.editPram.extra = img[0].sattDir;
          }
          if (tit === "2" && !num) {
            img.map(item => {
              attr.push(item.attachment_src);
              _this.formValidate.slider_image.push(item);
            });
          }
        },
        tit,
        "store"
      );
    },
    close() {
      this.$emit("hideEditDialog");
    },
    initEditData() {
      this.parentOptions = [...this.allTreeList];
      this.addTreeListLabelForCasCard(this.parentOptions, "child");
      const { extra, name, pid, sort, status, type, id, url, subAppId } = this.editData;
      if (this.isCreate === 1) {
        this.editPram.extra = extra;
        this.editPram.name = name;
        this.editPram.pid = pid;
        this.editPram.sort = sort;
        this.editPram.status = status;
        this.editPram.type = type;
        this.editPram.url = url;
        this.editPram.id = id;
        this.editPram.subAppId = subAppId ? subAppId.split(','):[]
      } else {
        this.editPram.pid = this.prent.id;
        this.editPram.type = this.biztype.value;
      }
    },
    addTreeListLabelForCasCard(arr, child) {
      arr.forEach((o, i) => {
        if (o.child && o.child.length) {
          // o.disabled = true
          o.child.forEach(j => {
            j.disabled = true;
          });
        }
      });
    },
    handlerSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return;
        this.handlerSaveOrUpdate(this.isCreate === 0);
      });
    },
    handlerSaveOrUpdate(isSave) {
      console.log(this.editPram, 'this.editPram----')
      this.editPram.subAppId = this.editPram.subAppId.join(',')
      if (isSave) {
        // this.editPram.pid = this.prent.id
        this.loadingBtn = true;
        categoryApi
          .addCategroy(this.editPram)
          .then(data => {
            this.$emit("hideEditDialog");
            this.$message.success("创建目录成功");
            this.loadingBtn = false;
          })
          .catch(() => {
            this.loadingBtn = false;
          });
      } else {
        this.editPram.pid = Array.isArray(this.editPram.pid)
          ? this.editPram.pid[0]
          : this.editPram.pid;
        this.loadingBtn = true;
        categoryApi
          .updateCategroy(this.editPram)
          .then(data => {
            this.$emit("hideEditDialog");
            this.$message.success("更新目录成功");
            this.loadingBtn = false;
          })
          .catch(() => {
            this.loadingBtn = false;
          });
      }
    }
  }
};
</script>

<style scoped></style>
